【プラグイン不要】CSSだけでパララックス！
パララックスを実装するには、JSライブラリやプラグインを使ったお手頃な実装があります。しかし、それらの中身は複雑で初心者が理解しようとするとハードルはちょっと高いです。。そのため、ちゃんと仕組みを理解してパララックスを実装したいと思う方や、サイトの一部分だけの実装なので、HTMLとCSSだけでサクッと作りたいと思う方は、今回ご紹介する実装を参考にしてみてください！
ではいってみましょう！
画像を固定してパララックスを実装する方法
サンプル１
HTML
<div class="parallax_box">
<div class="parallax_content img_bg_01">CONTENT1</div>
<div class="parallax_content img_bg_02">CONTENT2</div>
<div class="parallax_content img_bg_03">CONTENT3</div>
<div class="parallax_content img_bg_04">CONTENT4</div>
<div class="parallax_content img_bg_05">CONTENT5</div>
</div>CSS
.parallax_content{
display: flex;
height: 100%;
padding: 100%;
justify-content: center;
align-items: center;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.img_bg_01{
background-image: url();
}
.img_bg_02{
background-image: url();
}
.img_bg_03{
background-image: url();
}
.img_bg_04{
background-image: url();
}
.img_bg_05{
background-image: url();
}
このCSSでのポイントは背景画像に設定している「background-attachment: filxed」です。これを設定することで、背景画像はスクロールしても動かさずに固定された状態になります。あとは パララックスさせたい画像を並べることで、背景がどんどん変化するパララックスの出来上がり！簡単に実装できますね！
サンプル２
HTML
<div class="parallax_box">
<div class="parallax_content img_bg_01">PARALLAX AREA</div>
<div class="front_content">CONTENT AREA</div>
<div class="parallax_content img_bg_02">PARALLAX AREA</div>
<div class="front_content">CONTENT AREA</div>
<div class="parallax_content img_bg_03">PARALLAX AREA</div>
<div class="front_content">CONTENT AREA</div>
</div>CSS
.parallax_content{
min-height: 400px;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.front_content{
padding: 60px;
background-color: #fff;
}
.parallax_content.img_bg_01{
background-image: url();
}
.parallax_content.img_bg_02{
background-image: url();
}
.parallax_content.img_bg_03{
background-image: url();
}今度は画像の間に通常のコンテンツエリアを入れてみました。先ほどのCSSを変えずにHTMLを変更するだけで可能です。しかしこの「background-attachment」には欠点があります。それは、スマートフォンなどのモバイル端末でサイトにアクセスした際に、想定外の挙動を起こす可能性があることです。
そのような不安材料を解決する一つの方法として以下のCSSを追加するといいでしょう。
@media screen and (max-width: 768px){
.parallax_content{
height: 100%;
background-image: none;
}
.parallax::before{
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
-webkit-transform: translate3d(0, 0, -1px);
transform: translate3d(0, 0, -1px);
width: 100%;
min-hieght: 100%;
-webkit-background-size: cover;
background-size: cover;
z-index: -1;
}
.parallax_content.img_bg_01::before{
background-image: url();
}
.parallax_content.img_bg_02::before{
background-image: url();
}
.parallax_content.img_bg_03::before{
background-image: url();
}
}まず先ほどの不安材料だった「background-attachment」を無効にします。その後に、疑似要素に画像を設定して背面に固定します。この方法で、固定された画像の上にコンテンツエリアをスクロールすることができます。しかし、この方法では1つの画像のみしか固定されないので、スマートフォンも考慮してこのパララックスを実装するには、JSライブラリなどJavaScriptを用いるのが簡単でしょう。
任意の要素にパララックスを実装する
HTML
<div class="parallax_box">
<div class="parallax_content parallax_back">
<div class="title">parallax</div>
</div>
<div class="parallax_content parallax_front">
<div class="title">ParaLux</div>
</div>
</div>CSS
.parallax_box{
perspective: 1px;
height: 400px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.parallax_content{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 400px 0;
}
.parallax_front{
-webkit-transform: translateZ(5px);
transform: translateZ(5px);
}
.parallax_back{
-webkit-transform: translateZ(-10px) scale(5);
transform: translateZ(-10px) scale(5);
}
.title{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}今度は画像以外でのパララックスの実装例です。
この場合のポイントは親要素のスタイルに設定されている「height」および「perspective」プロパティです。これらを設定することにより、親要素の「.parallax_box」に対して、z軸方向の奥行きをつくることができます。
次に、子要素の「. parallax_element」では「position: absolute」で親要素に対して、ユーザーの任意の位置に絶対配置することができます。
「parallax_back」と「parallax_front」では、z軸方向の奥行きの差を「transform: translateZ()」で設定しています。translateZ()の値が低いほど、要素が奥側にいきます。また、要素が奥側にいくほど、要素の大きさが小さくなり、スクロールに対しての動きが小さくなります。要素のサイズについては、「transform: scale()」で任意に調整することができます。
このようにcssだけで、任意の要素に対してスクロールに差をつくり、パララックスを実装することができます。
intern
